
    var newFlag = true; // 阻止新增 true-可以继续新增 false-请先编辑完原有的
    var isEdit = false; // 当前是否有在编辑
    var score = []; //谱子
    var qn='8'//默认时值八分
    let q={semibreve:16,2:8,8:2,16:1,32:0.5,4:4};//时值表达与数值关系
    //键盘与按键关系
    var key = {
        q: 1, w: 2, e: 3, r: 4, t: 5, a: 6, s: 7, d: 11, f: 12, g: 13, z: 14, x: 15, c: 16, v: 17, b: 21
    }
    //键盘与按键绑定
    $('body').on('keyup' ,k => {
        key[k.key]&& but.other(key[k.key])
    })
    //按钮与事件绑定
    var but = {
        'key-whole': () => { semibreve() },
        'key-2': () => { halfNote() },
        'key-4': () => { quarterNote() },
        'key-8': () => { quaverNote() },
        'key-16': () => { semiquaverNote() },
        'key-32': () => { demisemiquaverNote() },
        'key-dot': () => { dottedNote() },
        'key-triplet': () => { triplet() },
        'key-0': () => { restNote() },
        'key-add': () => { newFlag ? addNote() : 0 },
        'key-del': () => { isEdit ? delNote() : 0 },
        'key-pre': () => { newFlag ? preNote() : (delNote(), newFlag = true, preNote()); },
        'key-next': () => { newFlag ? nextNote() : 0 },
        'key-finish': () => { doFinish() },
        'key-play': () => { doPlay() },
        other: (key) => { notation(key) }
    }
    // 点击页面按钮
    $('body').on('click', '.key', function () {
        let key = $(this).attr('data-key');
        $(this).addClass('key-scale-animation');
        setTimeout(() => {
            $(this).removeClass('key-scale-animation');
        }, 500);
        but[key] ? but[key]() : but.other(key)
    });

    doResize();
    $(window).resize(function () {
        doResize();
        let windowWidth = $(window).width();
        if (windowWidth < 376) {
            alert('建议横屏体验');
        }
    });
    // 切换横竖屏处理的部分样式
    function doResize() {
        if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
            $('.footer .keys').css({ 'width': '100%', 'min-width': 'auto' });
            $('.footer .keys .key-group').css('margin-bottom', '5px');
            let keyHeight = $('.footer .keys .key-group .key').outerWidth();
            let shrink = (keyHeight / 60).toFixed(1);
            $('.footer .keys .key-group .key').css('height', keyHeight + 'px')
            $('.footer .keys .key-group .key .key-desc').css('transform', 'scale(' + shrink + ')');
            $('.footer .keys .key-group .key .key-title').css('transform', 'scale(' + shrink + ')');
        } 
    }

    // 播放状态-按钮动画
    /* $('.piano-key').click(function () {
     $(this).children('.key-rotate-animation').addClass('rotate-around').removeClass('rotate-original');
     setTimeout(() => {
     $(this).children('.key-rotate-animation').addClass('rotate-original').removeClass('rotate-around');
     }, 500);
     }); */

    // 点击简谱编辑
    $('body').on('click', '.note-template', function () {
        if(!newFlag&&(' ' + this.className + ' ').indexOf('edit') == -1)
        $(this).addClass('edit').siblings().removeClass('edit');
        isEdit = true;
    })

    // 取消编辑
    $('.main').on('click',function (event) {
        if (newFlag
            &&!$('.key').is(event.target) && $('.key').has(event.target).length === 0
            && !$('.note-template').is(event.target) && $('.note-template').has(event.target).length === 0) {
            if (!$('.edit').attr('data-numbers')) {
                delNote();
            } else {
                $('.note-template').removeClass('edit');
            }
            isEdit = false;
        }
    })

    /**
     * 音符逻辑
     * 1、判断是否已有与此按钮对应的音符，有则不往下执行，无则继续
     * 2、清除原音符关联元素、样式、数据
     * 3、插入此按钮关联元素、样式、数据
     *      1.全音符、二分音符与附点音符互斥
     *      2.八分音符、十六分音符、三十二分音符根据前后元素是否追加joint-after、joint-before
     *      3.三连音在八分音符、十六分音符、三十二分音符下才给予追加
     */


    /** 全音符按键处理 */
    async function semibreve() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        if (dataNote == 'semibreve') {
            qn=dataNote
            return;
        }
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        clearNotes(dataNote);

        let template = `<div class="note-empty">—</div><div class="note-empty">—</div><div class="note-empty">—</div>`;
        if ($edit.hasClass('note-dot')) {
            $edit.removeClass('note-dot');
        }

        $edit.after(template);
        $edit.attr('data-note', 'semibreve');
        let index = await getIndexOfEdit();
        changeScore(index, 'semibreve');
    }
    /** 二分音符按键处理 */
    async function halfNote() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        if (dataNote == '2') {
            qn=dataNote
            return;
        }
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        clearNotes(dataNote);

        if ($edit.hasClass('note-dot')) {
            $edit.removeClass('note-dot');
        }
        let template = `<div class="note-empty">—</div>`;
        $edit.after(template);
        $edit.attr('data-note', '2')
        let index = await getIndexOfEdit();
        changeScore(index, '2');
    }
    /** 四分音符按键处理 */
    async function quarterNote() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        let multiple = $edit.hasClass('note-dot') ? 1.5 : null;
        if (dataNote == '4') {
            qn=dataNote
            return;
        }
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        clearNotes(dataNote);
        $edit.attr('data-note', '4')
        let index = await getIndexOfEdit();
        changeScore(index, '4', null, multiple);
    }
    /** 八分音符按键处理 */
    async function quaverNote() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        let multiple = $edit.hasClass('note-dot') ? 1.5 : 1;
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        // multiple = $('.edit').hasClass('triplet-high') ? multiple * 0.66 : multiple; // 
        if (dataNote == '8') {
            qn=dataNote
            return;
        }
        clearNotes(dataNote);
        addQuaverNote();
        let index = await getIndexOfEdit();
        changeScore(index, '8', null, multiple);
    }
    /** 追加八分音符元素、样式、数据 */
    function addQuaverNote() {
        let $edit = $('.edit');
        let lastNote = $edit.prev('.note-template').attr('data-note');
        let nextNote = $edit.next('.note-template').attr('data-note');
        let template =
            `<p class="beat-8${lastNote == '8' ? ' joint-before' : ''}${nextNote == '8' || nextNote == '16' || nextNote == '32' ? ' joint-after' : ''}"></p>`;
        $('.edit .note .note-main').after(template);
        $edit.attr('data-note', '8')
        addJoint('8', lastNote, nextNote);
    }
    /** 十六分音符按键处理 */
    async function semiquaverNote() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        let multiple = $edit.hasClass('note-dot') ? 1.5 : 1;
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        // multiple = $edit.hasClass('triplet-high') ? multiple * 0.66 : multiple;
        if (dataNote == '16') {
            qn=dataNote
            return;
        }
        clearNotes(dataNote);
        addSemiquaverNote();
        let index = await getIndexOfEdit();
        changeScore(index, '16', null, multiple);
    }
    /** 追加十六分音符元素、样式、数据 */
    function addSemiquaverNote() {
        let $edit = $('.edit');
        let lastNote = $edit.prev('.note-template').attr('data-note');
        let nextNote = $edit.next('.note-template').attr('data-note');
        let template =
            `<p class="beat-8${lastNote == '8' || lastNote == '16' ? ' joint-before' : ''}${nextNote == '16' || nextNote == '32' ? ' joint-after' : ''}"></p>
             <p class="beat-16${lastNote == '16' ? ' joint-before' : ''}${nextNote == '16' || nextNote == '32' ? ' joint-after' : ''}"></p>`;
        $('.edit .note .note-main').after(template);
        $edit.attr('data-note', '16')
        addJoint('16', lastNote, nextNote);
    }
    /** 三十二分音符按键处理 */
    async function demisemiquaverNote() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        let multiple = $edit.hasClass('note-dot') ? 1.5 : 1;
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        // multiple = $edit.hasClass('triplet-high') ? multiple * 0.66 : multiple;
        if (dataNote == '32') {
            qn=dataNote
            return;
        }
        clearNotes(dataNote);
        addDemisemiquaverNote();
        let index = await getIndexOfEdit();
        changeScore(index, '32', null, multiple);
    }
    /** 追加三十二音符元素、样式、数据 */
    function addDemisemiquaverNote() {
        let lastNote = $('.edit').prev('.note-template').attr('data-note');
        let nextNote = $('.edit').next('.note-template').attr('data-note');
        let template =
            `<p class="beat-8${lastNote == '8' || lastNote == '16' || nextNote == '32' ? ' joint-before' : ''}${nextNote == '32' ? ' joint-after' : ''}"></p>
             <p class="beat-16${lastNote == '16' || nextNote == '32' ? ' joint-before' : ''}${nextNote == '32' ? ' joint-after' : ''}"></p>
             <p class="beat-32${nextNote == '32' ? ' joint-before' : ''}${nextNote == '32' ? ' joint-after' : ''}"></p>`;
        $('.edit .note .note-main').after(template);
        $('.edit').attr('data-note', '32')
        addJoint('32', lastNote, nextNote);
    }
    /** 附点音符按键处理 */
    async function dottedNote() {
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        $('.edit').toggleClass('note-dot');
        let multiple = $edit.hasClass('note-dot') ? 1.5 : 1;
        if (dataNote == 'semibreve' || dataNote == '2') {
            $('.edit').attr('data-note', '4')
            clearNotes(dataNote);
        }
        let index = await getIndexOfEdit();
        changeScore(index, dataNote, null, multiple);
    }
    /** 三连音按键处理 */
    function triplet() {
        if (checkTriplet()) {
            addTripletClass();
        } else {
            clearTriplet();
        }
    }
    /**
     * 判断是否具备追加三连音条件
     * @return 
     *      true - 可追加 false - 不可追加
     */
    function checkTriplet() {
        let $edit = $('.edit');
        let firstNote = Number($edit.attr('data-note'));
        let secondNote = Number($edit.next('.note-template').attr('data-note'));
        let thirdNote = Number($edit.next('.note-template').next('.note-template').attr('data-note'));
        let sum = firstNote + secondNote + thirdNote;
        if ($edit.hasClass('triplet-high') || sum / 8 != 3 && sum / 16 != 3 && sum / 32 != 3) {
            return false;
        }
        return true;
    }
    /** 追加三连音样式 */
    async function addTripletClass() {
        // 追加的时候是按顺序
        let $edit = $('.edit');
        $edit.addClass('triplet-left triplet-high');
        $edit.next('.note-template').addClass('triplet triplet-high');
        $edit.next('.note-template').next('.note-template').addClass('triplet-right triplet-high');
        let arr = await getIndexOfEditToTriplet();
        for (let i = 0; i < arr.length; i++) {
            let note = $('.note-template').eq(arr[i]).attr('data-note');
            let multiple = $('.note-template').eq(arr[i]).hasClass('note-dot') ? 1.5 : 1;
            changeScore(arr[i], note, null, multiple * 0.66);
        }
    }
    /** 清除三连音样式 */
    async function clearTriplet() {
        let $note = $('.note-template');
        let arr = await getIndexOfEditToTriplet();
        for (let i = 0; i < arr.length; i++) {
            let note = $note.eq(arr[i]).attr('data-note');
            let multiple = $note.eq(arr[i]).hasClass('note-dot') ? 1.5 : 1;
            changeScore(arr[i], note, null, multiple);
            $note.removeClass('triplet-left triplet triplet-right triplet-high')
        }
    }
    /** 休止符按键处理 */
    async function restNote() {
        newFlag = true;
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        clearNotes(dataNote);

        $('.edit').replaceWith(function () {
            return `<div class="note-template edit" data-note="4" data-numbers="0">
                        <div class="note note-rest">
                            <p class="note-main">0</p>
                        </div>
                    </div>`;
        })
        let index = await getIndexOfEdit();
        changeScore(index, 4, [0])
    }
    /** 新增简谱 */
    function addNote() {
        newFlag = false;
        isEdit = true;
        let template = `<div class="note-template edit" data-note="${qn}"></div>`;
        let $edit = $('.edit');
        let dataNote = $edit.attr('data-note');
        $('.note-template').removeClass('edit');
        if ($edit.length == 0) {
            $('.notes').append(template)
        } else if (dataNote == 'semibreve') {
            $edit.next().next().next().after(template)
        } else if (dataNote == '2') {
            $edit.next().after(template)
        } else if ((dataNote == '8' || dataNote == '16' || dataNote == '32') && $edit.hasClass('triplet-left')) {
            $edit.next().next().after(template)
        } else if ((dataNote == '8' || dataNote == '16' || dataNote == '32') && $edit.hasClass('triplet')) {
            $edit.next().after(template)
        } else {
            $edit.after(template)
        }

        if (score.length < 2) {
            score.push([ q[qn] ]);
        } else {
            let newScore = [];
            let isInset = false; // 是否已插入
            $('.note-template').each(function (index, element) {
                if ($(element).hasClass('edit')) {
                    newScore.push([ q[qn] ]);
                    isInset = true;
                } else {
                    if (isInset) {
                        newScore.push(score[index - 1]);
                    } else {
                        newScore.push(score[index]);
                    }
                }

            });
            score = newScore;
        }
    }
    /** 删除按键处理 */
    async function delNote() {
        let $edit = $('.edit');
        let index = await getIndexOfEdit();
        let dataNote = $edit.attr('data-note');
        if ($edit.hasClass('triplet-high')) {
            clearTriplet();
        }
        clearNotes(dataNote);
        score.splice(index, 1);
        newFlag = true;
        isEdit = false;
        $('.edit').remove();
    }
    /** 上一个按键处理 */
    async function preNote() {
        let $note = $('.note-template');
        if (isEdit) {
            let index = await getIndexOfEdit();
            $note.eq(--index).addClass('edit').siblings().removeClass('edit');
        } else {
            $note.eq($note.length - 1).addClass('edit').siblings().removeClass('edit');
        }
        isEdit = true;
    }
    /** 下一个按键处理 */
    async function nextNote() {
        let $note = $('.note-template');
        if (isEdit) {
            let index = await getIndexOfEdit();
            let i = ++index == $note.length ? 0 : index;
            $note.eq(i).addClass('edit').siblings().removeClass('edit');
        } else {
            $note.eq(0).addClass('edit').siblings().removeClass('edit');
        }
        isEdit = true;
    }
    /** 获取当前下标 */
    function getIndexOfEdit() {
        return new Promise((resolve) => {
            let i=-1
            $('.note-template').each(function (index, element) {
                if ($(element).hasClass('edit')) {
                    i=index;
                }
            }).then(
            resolve(i));
        })
    }
    /** 获取当前编辑下标与三连音的下标 */
    function getIndexOfEditToTriplet() {
        return new Promise((resolve) => {
            $('.note-template').each(function (index, element) {
                if ($(element).hasClass('edit')) {
                    let arr = [];
                    arr.push(index);
                    if ($(element).hasClass('triplet-left')) {
                        arr.push(++index);
                        arr.push(++index);
                    } else if ($(element).hasClass('triplet')) {
                        arr.push(--index);
                        arr.push(index += 2);
                    } else if ($(element).hasClass('triplet-right')) {
                        arr.push(--index);
                        arr.push(--index);
                    }
                    resolve(arr.sort(function (a, b) {
                        return a - b;
                    }));
                }
            });
        })
    }
    /**
     * 简谱按键处理
     * @param {*} key 点击的简谱按钮
     */
    async function notation(key) {
        if(!isEdit)return;
        playAudio(key)
        let $edit = $('.edit');
        newFlag = true;
        if ($('.edit .note-rest').length > 0) {
            $('.edit .note-rest').remove();
            $edit.attr('data-numbers', '')
        }
        let numbers = null;
        if ($edit.attr('data-numbers')) {
            numbers = $edit.attr('data-numbers').split(',');
            let numberIndex = undefined;
            for (let i = 0; i < numbers.length; i++) { // 防止重复键入
                if (key == numbers[i]) {
                    numberIndex = i;
                    break;
                }
            }
            if (numberIndex != undefined) {
                numbers.splice(numberIndex, 1);
            } else {
                numbers.push(key);
            }
        } else {
            numbers = [];
            numbers.push(key);
        }
        addNotation(numbers);
        let index = await getIndexOfEdit();
        changeScore(index, $edit.attr('data-note'), numbers);
    }
    /**
     * 简谱生成
     * @param {*} numbers 简谱数组
     */
    function addNotation(numbers) {
        let $edit = $('.edit');
        $edit.html('');
        numbers.sort(function (a, b) {
            return a - b;
        });

        $edit.attr('data-numbers', numbers.join(','))
        let template1 = ''; // 低音
        let template2 = ''; // 中音
        let template3 = ''; // 高音
        for (let i = 0; i < numbers.length; i++) {
            let decade = numbers[i] - numbers[i] % 10; // 判断高中低音 decade：0-低，1-中，2-高
            if (decade == 0) {
                template1 +=
                    `<div class="note">
                        <p class="note-main">${numbers[i] % 10}</p>
                        <p class="pitch-low">·</p>
                    </div>`;
            } else if (decade == 10) {
                template2 +=
                    `<div class="note">
                        <p class="note-main">${numbers[i] % 10}</p>
                    </div>`;
            } else if (decade == 20) {
                template3 +=
                    `<div class="note pitch-high">
                        <p class="note-main">${numbers[i] % 10}</p>
                    </div>`;
            }
        }
        $edit.append(template3 + template2 + template1);

        if ($edit.attr('data-note') == '8') {
            $('.edit .beat-8').remove();
            addQuaverNote();
        } else if ($edit.attr('data-note') == '16') {
            $('.edit .beat-8').remove();
            $('.edit .beat-16').remove();
            addSemiquaverNote();
        } else if ($edit.attr('data-note') == '32') {
            $('.edit .beat-8').remove();
            $('.edit .beat-16').remove();
            $('.edit .beat-32').remove();
            addDemisemiquaverNote();
        }


    }
    /**
     * 根据下标更新score数组
     * @param {*} index 更新的下标
     * @param {*} note 时值
     * @param {*} numbers 简谱数组
     * @param {*} multi 附点和三连的倍数
     */


    function changeScore(index, note, numbers, multi) {
        // console.log(index, note, numbers, multi);
        let duration = q[note]?q[note]:qn;
        score[index][0] = multi ? duration * multi : duration;
        let o = score[index];
        if (numbers) {
            o = [
                score[index][0]
            ]
            o.push.apply(o,numbers)
        }
        score.splice(index, 1, o);
    }
    /** 查看/显示简谱 */
    function doFinish() {
        let e = `return{b=1\n
        ,--上边这个数字是速度，按需修改\n
        sTime=15000/67\n
        ,--上边这个除号后的数字表示每分钟的拍数，按需修改
        \nscore={--下边开始是谱子主体，可单独复制出来加到其它谱子最后两个“}”之前\n`;
        for (u in score) {
            var n = score[u];
            e += "{"
            for (i in n){
                let n2 = n[i]==0?8:n[i];
                e += i == '0' ? n2 : "," + n2;}
            e += "},"
        }
        e = e.substr(0, e.length - 1)+'\n\n--谱子结束\n}}'
        $(".note-textarea").toggle().val(e).css('top', '80px')
    }
    //播放进度
    let progress=0
    //播放内容
    let playing=[]
    sTime=200
    /** 播放所选简谱 */
    async function doPlay() {


        let index
        if(progress+1!=score.length&&playing.length!=0) {
            pause();
            return;
        }else {
            index = await getIndexOfEdit()
            if (index==-1||index + 1 == score.length ) {
                index=0;
            }
        }
        let time=0//运行中
        let $note = $('.note-template');
        let s2=deepCopy(score)
        let sumTime=0
        for(let i=index;i<s2.length;i++){
            time+=i==0?2:score[i-1][0]
            playing[i]=setTimeout(()=>{
                progress=i
                $note.eq(i).addClass('edit').siblings().removeClass('edit');
                for(let j=1;j<score[i].length;j++){
                    playAudio(score[i][j])
                }
            },time*sTime)
            // s2[i][0]=sumTime+=s2[i][0]*sTime
        }
        playing[s2.length]=setTimeout(()=>{progress=0;playing=[]},time*sTime)

        // playing2=setInterval(()=>{
        //     time+=20
        //     if(s2[index]&&s2[index][0]<=time){
        //         time=0
        //         nextNote();
        //         for(let j=1;j<s2[index].length;j++){
        //             playAudio(s2[progress][j])
        //         }
        //         progress=++index
        //         if(index-1==s2.length){
        //             index=0
        //             pause()
        //         }
        //     }
        // },20,s2[s2.length-1][0])
        // setInterval(()=>{if(s2.length==0)pause()},20)
        // for(let i=index;i<s2.length;i++){
        //     await playNote(s2[i],s2[i==0?0:i-1][0]*=sTime).then($note.eq(i).addClass('edit').siblings().removeClass('edit'))
        // }
    }
    function wait(time) {
        return new Promise(function(resolve,reject) {
            setTimeout(resolve,time);
        });
    }
    function deepCopy(obj1) {
        var obj2 = Array.isArray(obj1) ? [] : {};
        if (obj1 && typeof obj1 === "object") {
            for (var i in obj1) {
                if (obj1.hasOwnProperty(i)) {
                    // 如果子属性为引用数据类型，递归复制
                    if (obj1[i] && typeof obj1[i] === "object") {
                        obj2[i] = deepCopy(obj1[i]);
                    } else {
                        // 如果是基本数据类型，只是简单的复制
                        obj2[i] = obj1[i];
                    }
                }
            }
        }
        return obj2;
    }
    //暂停
    function pause() {
        playing&&(playing.forEach((i)=>clearTimeout(i)),playing=[])

        // playing||clearInterval(playing)
        // playing=0
    }
    //停止
    function stop() {
        pause()
    }
    //音
    audio= {
        '1': new Audio('audio/1.mp3'),
        '2': new Audio('audio/2.mp3'),
        '3': new Audio('audio/3.mp3'),
        '4': new Audio('audio/4.mp3'),
        '5': new Audio('audio/5.mp3'),
        '6': new Audio('audio/6.mp3'),
        '7': new Audio('audio/7.mp3'),
        '11': new Audio('audio/11.mp3'),
        '12': new Audio('audio/12.mp3'),
        '13': new Audio('audio/13.mp3'),
        '14': new Audio('audio/14.mp3'),
        '15': new Audio('audio/15.mp3'),
        '16': new Audio('audio/16.mp3'),
        '17': new Audio('audio/17.mp3'),
        '21': new Audio('audio/21.mp3'),
    }
    // setTimeout(()=>{for(a in audio){audio[a].load()}},1000)
    /**播放一个简谱*/
    async function playNote(note,t) {
        setTimeout(()=>{
            for(let j=1;j<note.length;j++)playAudio(note[j])
        },t)
    }
    /**播放一个音*/
    function playAudio(n) {
        setTimeout(()=>{
            if(!audio[n].ended)audio[n].currentTime=0
            audio[n].play()
         },0)
    }

    /**
     * 清除该列原有音符样式
     * @param {*} dataNote 原有音符
     */
    function clearNotes(dataNote) {
        let $edit = $('.edit');
        let lastNote = $edit.prev('.note-template').attr('data-note');
        let nextNote = $edit.next('.note-template').attr('data-note');
        if (dataNote == 'semibreve') {
            while ($edit.next().hasClass('note-empty')) {
                $edit.next().remove();
            }
        } else if (dataNote == '2') {
            $edit.next('.note-empty').remove();
        } else if (dataNote == '8') {
            $('.edit .beat-8').remove();
            clearJoint(lastNote, nextNote);
        } else if (dataNote == '16') {
            $('.edit .beat-8').remove();
            $('.edit .beat-16').remove();
            clearJoint(lastNote, nextNote);
        } else if (dataNote == '32') {
            $('.edit .beat-8').remove();
            $('.edit .beat-16').remove();
            $('.edit .beat-32').remove();
            clearJoint(lastNote, nextNote);
        }
    }
    /**
     * 清除前后元素为八分、十六分、三十二分时连接前方的样式
     * @param {*} lastNote 编辑元素前一元素的时值
     * @param {*} nextNote 编辑元素后一元素的时值
     */
    function clearJoint(lastNote, nextNote) {
        if (lastNote == '8' || lastNote == '16' || lastNote == '32') {
            $('.edit').prev('.note-template').children('.note').children('p').removeClass('joint-after');
        }
        if (nextNote == '8' || nextNote == '16' || nextNote == '32') {
            $('.edit').next('.note-template').children('.note').children('p').removeClass('joint-before');
        }
    }
    /**
     * 前后元素为八分、十六分、三十二分时追加样式
     * @param {*} dataNote 编辑元素的时值
     * @param {*} lastNote 编辑元素前一元素的时值
     * @param {*} nextNote 编辑元素后一元素的时值
     */
    function addJoint(dataNote, lastNote, nextNote) {
        let $edit = $('.edit');
        if (dataNote == '8' && lastNote == '8') {
            $edit.prev('.note-template').children('.note').children('p.beat-8').addClass('joint-after');
        }
        if (dataNote == '8' && (nextNote == '8' || nextNote == '16' || nextNote == '32')) {
            $edit.next('.note-template').children('.note').children('p.beat-8').addClass('joint-before');
        }
        if (dataNote == '16' && (lastNote == '8' || lastNote == '16')) {
            $edit.prev('.note-template').children('.note').children('p.beat-8').addClass('joint-after');
            $edit.prev('.note-template').children('.note').children('p.beat-16').addClass('joint-after');
        }
        if (dataNote == '16' && (nextNote == '16' || nextNote == '32')) {
            $edit.next('.note-template').children('.note').children('p.beat-8').addClass('joint-before');
            $edit.next('.note-template').children('.note').children('p.beat-16').addClass('joint-before');
        }
        if (dataNote == '32' && (lastNote == '8' || lastNote == '16')) {
            $edit.prev('.note-template').children('.note').children('p.beat-8').addClass('joint-after');
            $edit.prev('.note-template').children('.note').children('p.beat-16').addClass('joint-after');
            $edit.prev('.note-template').children('.note').children('p.beat-32').addClass('joint-after');
        }
        if (dataNote == '32' && nextNote == '32') {
            $edit.next('.note-template').children('.note').children('p.beat-8').addClass('joint-before');
            $edit.next('.note-template').children('.note').children('p.beat-16').addClass('joint-before');
            $edit.next('.note-template').children('.note').children('p.beat-32').addClass('joint-before');
        }
    }
